<template>
  <router-view />
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import store from "@/store";
import { creat } from "@/store/createData.js";

onMounted(() => {
  nextTick(async () => {
    // 重载
    await setVuexData();
    // 载入默认数据
    await creat();
    await creatResponsive();
    window.addEventListener("resize", () => {
      creatResponsive();
    });
  });
});

function setVuexData() {
  //在页面加载时读取sessionStorage里的状态信息
  sessionStorage.getItem("userMsg") &&
    store.replaceState(
      Object.assign(store.state, JSON.parse(sessionStorage.getItem("userMsg")))
    );

  //在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("userMsg", JSON.stringify(store.state));
  });
}
// 初始化响应式
function creatResponsive() {
  const num = document.body.offsetWidth;
  let type = "lg";
  if (num < 768) type = "xs";
  if (num >= 768) type = "sm";
  if (num >= 992) type = "md";
  if (num >= 1200) type = "lg";
  if (num >= 1920) type = "xl";

  store.commit("system/SET", { key: "screenWidth", value: { num, type } });
}
</script>
<style lang="scss">
@import "~@/styles/base.scss";

// 统一配色
body {
  background: #282c34;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
